<template>
    <div class="emergency-page">
        <a-card title="应急联系人" style="width: 600px;">
            <a-table size="small" bordered :data-source="contacts" :columns="contactColumns" :pagination="false">
            </a-table>
        </a-card>

        <a-card title="应急管理预案" style="width: 300px; margin-top: 16px;">
            <a-table size="small" bordered :data-source="plans" :columns="planColumns" :pagination="false">
                <template #bodyCell="{ column, record }">
                    <template v-if="column.dataIndex === 'type'">
                        {{ record.type }}
                    </template>
                    <template v-if="column.dataIndex === 'operation'">
                        <a-button type="link" @click="viewPlan(record)">查看详情</a-button>
                    </template>
                </template>
            </a-table>
        </a-card>


        <a-modal v-model:open="planModalVisible" title="预案详情" @cancel="handlePlanModalCancel" width="700px"
            :footer="null">
            <div class="plan-detail">
                <h3>{{ selectedPlan.type }}应急预案</h3>
                <div class="plan-content">
                    <div class="plan-section">
                        <h4>预案目标</h4>
                        <p>{{ selectedPlan.objective }}</p>
                    </div>
                    <div class="plan-section">
                        <h4>应急响应流程</h4>
                        <ol>
                            <li v-for="(step, index) in selectedPlan.steps" :key="index">{{ step }}</li>
                        </ol>
                    </div>
                    <div class="plan-section">
                        <h4>注意事项</h4>
                        <ul>
                            <li v-for="(note, index) in selectedPlan.notes" :key="index">{{ note }}</li>
                        </ul>
                    </div>
                </div>
            </div>
        </a-modal>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import { getPropertyStaff } from '../api/api';

const planModalVisible = ref(false);
const selectedPlan = ref({});
const contacts = ref([]);

// 预案列表数据
const plans = ref([
    {
        id: 1,
        type: '火灾',
        objective: '确保楼宇人员安全，及时控制火势，保护公共设施，减少财产损失',
        steps: [
            '物业值班人员发现火情后立即启动消防应急预案，同时拨打119报警',
            '物业经理立即组织保安人员疏散楼内人员，确保安全通道畅通',
            '工程部人员立即切断相关区域电源，关闭燃气总阀',
            '物业人员使用消防栓、灭火器等设施进行初期灭火',
            '保安人员引导消防车辆进入小区，确保消防通道畅通',
            '物业人员协助消防部门进行灭火，提供楼宇消防设施信息'
        ],
        notes: [
            '物业人员必须熟悉楼宇消防设施位置和使用方法',
            '确保消防通道、安全出口畅通无阻',
            '定期检查消防设施，确保设备完好可用',
            '保持与消防部门的通讯畅通'
        ]
    },
    {
        id: 2,
        type: '地震',
        objective: '确保楼宇人员安全，防止次生灾害，保护重要设施设备',
        steps: [
            '物业值班人员发现地震后立即启动应急预案',
            '工程部人员立即切断楼宇电源，关闭燃气总阀',
            '物业人员组织楼内人员有序撤离到安全区域',
            '保安人员检查楼宇结构，确保疏散通道安全',
            '物业人员检查电梯是否有人被困，及时救援',
            '工程部人员检查供水、供电、燃气等设施受损情况'
        ],
        notes: [
            '物业人员必须熟悉楼宇结构，了解安全区域位置',
            '定期检查楼宇结构安全，确保疏散通道畅通',
            '保持应急物资储备充足',
            '与相关部门保持通讯畅通'
        ]
    },
    {
        id: 3,
        type: '洪水',
        objective: '防止水灾蔓延，保护楼宇设施设备，确保人员安全',
        steps: [
            '物业值班人员发现水情后立即启动防汛应急预案',
            '工程部人员检查地下室排水系统，确保排水泵正常工作',
            '物业人员组织人员关闭地下室入口，防止雨水倒灌',
            '保安人员检查楼宇周边排水系统，及时清理堵塞',
            '物业人员准备防汛物资，如沙袋、抽水泵等',
            '工程部人员检查电梯井、配电室等关键区域防水情况'
        ],
        notes: [
            '物业人员必须熟悉楼宇排水系统布局',
            '定期检查排水设施，确保排水系统畅通',
            '保持防汛物资储备充足',
            '关注天气预报，提前做好防范准备'
        ]
    }
]);

// 表格配置
const contactColumns = [
    { title: '姓名', dataIndex: 'name', key: 'name' },
    { title: '部门', dataIndex: 'department', key: 'department' },
    { title: '职位', dataIndex: 'position', key: 'position' },
    { title: '电话', dataIndex: 'phone', key: 'phone' }
];

const planColumns = [
    { title: '预案类型', dataIndex: 'type', key: 'type' },
    { title: '操作', dataIndex: 'operation', key: 'operation' }
];


// 事件处理函数
const viewPlan = (plan) => {
    selectedPlan.value = { ...plan };
    planModalVisible.value = true;
};

const handlePlanModalCancel = () => planModalVisible.value = false;

// 数据获取
const fetchPropertyStaff = async () => {
    try {
        const response = await getPropertyStaff();
        if (response.code === 200) {
            contacts.value = response.data
                // 过滤职位
                .filter(staff => ['物业经理', '安保主管', '消防主管'].includes(staff.position))
                // 转换数据格式
                .map(staff => ({
                    id: staff.id,
                    name: staff.name,
                    department: staff.department,
                    position: staff.position,
                    phone: staff.phone
                }));
        }
    } catch (error) {
        message.error('获取应急联系人数据失败');
    }
};

onMounted(fetchPropertyStaff);
</script>

<style scoped>
.emergency-page {
    position: absolute;
    top: 20px;
    left: 20px;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 1000;
}

.plan-detail {
    padding: 12px;
}

.plan-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.plan-section {
    background: #f5f5f5;
    padding: 8px 12px;
    border-radius: 4px;
}

.plan-footer {
    margin-top: 12px;
    text-align: center;
}
</style>